<template>
  <view v-if="getCartList.length > 0" class="cart-container">
    <my-address></my-address>
    <view class="cart-title">
      <uni-icons type="shop"></uni-icons>
      <text class="cart-title-text">购物车</text>
    </view>
    <uni-swipe-action>
      <uni-swipe-action-item v-for="item in getCartList" :key="item.goods_id" 
      @click="delGoods(item.goods_id)"
      :right-options="options">
        <my-goods :goods="item">
          <template #radio>
            <radio
              :checked="item.goods_state"
              color="#c00000"
              @click.stop="changeStatus(item.goods_id, item.goods_state)"
            />
          </template>
          <template #number>
            <view @click.stop="">
              <uni-number-box
                @change="changeNumber(item.goods_id, $event)"
                :min="1"
                :max="10"
                v-model="item.goods_number"
              ></uni-number-box>
            </view>
          </template>
        </my-goods>
      </uni-swipe-action-item>
    </uni-swipe-action>
    <my-settle></my-settle>
  </view>
  <view v-else class="empty-cart">
    <image
      src="../../static/cart_empty@2x.png"
      mode="scaleToFill"
      class="empty-img"
    />
    <text class="tip-text">空空如也</text>
  </view>
</template>

<script>
import tabBage from '../../mixins/tab-barge'
import { mapMutations, mapGetters } from 'vuex'
import myAddress from '../../components/my-address/my-address.vue'
import MySettle from '../../components/my-settle/my-settle.vue'
export default {
  components: { myAddress, MySettle },
  mixins: [tabBage],
  data () {
    return {
       options:[
        {
            text: '删除',
            style: {
                backgroundColor: '#c00000'
            }
        }
      ]
    }
  },
  computed: {
    ...mapGetters('cart', ['getCartList'])
  },
  methods: {
    ...mapMutations('cart', ['changeGoodsState', 'changeGoodsNumber','deleteGoodsById']),
    // rodio插槽改变值
    changeStatus (goods_id, goods_state) {
      console.log(goods_state)
      if (!goods_state) {
        goods_state = false
      }
      this.changeGoodsState({
        goods_id,
        goods_state: !goods_state
      })
    },
    // 商品增加减少事件
    // $event是默认值，商品的数量
    changeNumber (goods_id, goods_number) {
      this.changeGoodsNumber({
        goods_id,
        goods_number
      })
    },
    // 删除指定购物车商品
    delGoods(goods_id){
      this.deleteGoodsById(goods_id)
    }
  }
}
</script>

<style lang="scss" scoped>
.cart-container {
  padding-bottom: 50px;
  .cart-title {
    height: 40px;
    display: flex;
    align-items: center;
    font-size: 14px;
    padding-left: 5px;
    border-bottom: 1px solid #efefef;
    .cart-title-text {
      margin-left: 10px;
    }
  }
}
.empty-cart {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 150px;

  .empty-img {
    width: 90px;
    height: 90px;
  }

  .tip-text {
    font-size: 12px;
    color: gray;
    margin-top: 15px;
  }
}
</style>

